<template>
  <div class="comment-list">
    <van-cell title="全部评论"></van-cell>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <comment-item v-for="(comment,index) in list" :key="index"
       :comment="comment"
       @reply-click="$emit('reply-click',$event)"></comment-item>
      <!-- <van-cell v-for="(item,index) in list" :key="index" :title="item.content" /> -->
    </van-list>
  </div>
</template>
<script>
  import {
    getComments
  } from '@/api/comment'
  import CommentItem from './comment-item'
  export default {
    props: {
      source: {
        type: [Number, String, Object],
        required: true
      },
      type:{
        type:String,
        default:'a'
      },
      list:{
        type: Array,
        //引用类型必须通过数组或函数返回
        default: ()=>[]
      }
    },
    components:{
      CommentItem
    },
    data() {
      return {
        // list: [],
        loading: false,
        finished: false,
        offset: null,
        limit: 10
      }
    },
    methods: {
      async onLoad() {
        const res = await getComments({
          type: this.type,
          source: this.source.toString(),
          offset: this.offset,
          limit: this.limit
        })
        //将数据放到列表中
        console.log(res);
        this.$emit('update-total-count',res.data.data.total_count)
        const {results} = res.data.data
        this.list.push(...results)
        //关闭loading
        this.loading=false
        if(results.length){
          this.offset = res.data.data.last_id
        }else{
          this.finished=true
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>